<template>
  <div class="spinner" :style="parent">
    <div class="bounce1" :style="children"></div>
    <div class="bounce2" :style="children"></div>
    <div class="bounce3" :style="children"></div>
  </div>
</template>

<script>
    export default {
        name: "loading",
        props:{
          'parentWidth':{
            default:4.5,
          }
        },
        computed:{
          parent(){
            return {width:this.parentWidth+'rem'};
          },
          children(){
            let WH = this.parentWidth/5+'rem';
            return {width:WH,height:WH};
          }
        }
    }
</script>

<style scoped>
  .spinner {
    position:absolute;
    text-align: center;
    top:6rem;
    left:50%;
    transform:translate(-50%,-50%);
  }

  .spinner > div {
    background-color: #67CF22;
    border-radius: 100%;
    display: inline-block;
    animation: bouncedelay 1.4s infinite ease-in-out;
    animation-fill-mode: both;
  }

  .spinner .bounce1 {
    animation-delay: -0.32s;
  }

  .spinner .bounce2 {
    animation-delay: -0.16s;
  }

  @keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
    } 40% {
        transform: scale(1.0);
      }
  }
</style>
